What?

A common way to create impress.js presentations: Put a large image in the background, then position slides on top of it.

Background image could be a map, or just some picture related to the topic.

It looks like the presentation is flying or traveling above the background image.

I've used this technique a lot: Oscon presentation, HighLoad "cloud" presentation

How?

2 ways to do it:

<div class="step skip" data-scale="15">

For added effect, also set:

data-z="-500"

So?

• The "data-scale method" uses CSS 3D functionality, just like all impress.js slides, to scale up the image to be really large.
• Pro's:
  • Simple (same as creating any slide)
  • Efficient (browser can use graphics card)
• Con:
  • Do you see how blurred the background is?
  • This happens, because the browser first renders the image in 1:1 scale, then scales it 15x from there.
  • It doesn't matter if you used a really HD picture, the browser will still only render it in 1:1 scale and you can't improve that precision.
• So let's try another way...

2. Large width & height, no scaling

<div class="step skip" data-scale="1">
    <img src="molumen-world-map.svg"
         style="z-index: -1; width: 9000px;" />

So is it better?

• Pro's:
  • As you can see, the lines on right hand side are sharp and clear!
• Con:
  • Takes up lots of RAM!
  • In fact, often on the overview step, browser will fail to render the entire image.
  • Some transitions may become bumpy.
  • If background image is missing, try refreshing the presentation.
• For optimal results, try mixing both. Maybe data-scale="2" and <img width="5000px"
• Advanced: Break down background into smaller tiles, use CSS to hide the parts that don't need to be shown at a given time.